{% extends "teacher/base.html" %}


{% block content_main %}
<div class="layui-row">
    <div class="layui-col-md6">
        <div class="layui-row">
          <blockquote class="layui-elem-quote">单选题</blockquote>
          <form class="layui-form">
              <div class='layui-form-item'>
                <label class='layui-form-label'>问题</label>
                <div class='layui-input-block'>
                    <textarea type='text' name='question' id="single_choice_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>A</label>
                <div class='layui-input-block'>
                  <input type='text' name='a' id="single_choice_a" placeholder='请输入 A 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>B</label>
                <div class='layui-input-block'>
                  <input type='text' name='b' id="single_choice_b" placeholder='请输入 B 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>C</label>
                <div class='layui-input-block'>
                  <input type='text' name='c' id="single_choice_c" placeholder='请输入 C 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>D</label>
                <div class='layui-input-block'>
                  <input type='text' name='d' id="single_choice_d" placeholder='请输入 D 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>正确答案</label>
                <div class='layui-input-block'>
                  <select name='correct' id="single_choice_correct">
                    <option value='a' selected="">A</option>
                    <option value='b'>B</option>
                    <option value='c'>C</option>
                    <option value='d'>D</option>
                  </select>
                </div>
              </div>
                <div class='layui-form-item'>
                <div class='layui-input-block'>
                  <button type='button' onclick="add_single_choice_question();" class='layui-btn'>添加单选题</button>
                </div>
              </div>
          </form>
        </div>
        <hr style="background-color: green; height: 10px;"/>
        <div class="layui-row">
            <blockquote class="layui-elem-quote">判断题</blockquote>
            <form class="layui-form">
              <div class='layui-form-item'>
                <label class='layui-form-label'>问题</label>
                <div class='layui-input-block'>
                    <textarea type='text' name='question' id="judgmental_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
                </div>
              </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>正确答案</label>
                    <div class='layui-input-block'>
                      <select name='answer' id="judgmental_answer">
                        <option value='1' selected="">对</option>
                        <option value='0'>错</option>
                      </select>
                    </div>
                </div>
              <div class='layui-form-item'>
                <div class='layui-input-block'>
                  <button type='button' class='layui-btn' onclick="add_judgmental_question();">添加判断题</button>
                </div>
              </div>
            </form>
        </div>
        <hr style="background-color: green; height: 10px;"/>
        <blockquote class="layui-elem-quote">简答题</blockquote>
        <form class="layui-form">
          <div class='layui-form-item'>
            <label class='layui-form-label'>问题</label>
            <div class='layui-input-block'>
                <textarea type='text' name='question' id="short_answer_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
            </div>
          </div>
          <div class='layui-form-item'>
            <label class='layui-form-label'>回答</label>
            <div class='layui-input-block'>
              <textarea name="answer" id="short_answer_answer" placeholder="请输入回答" autocomplete="off" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class='layui-form-item'>
            <div class='layui-input-block'>
              <button type='button' onclick="add_short_answer_question();" class='layui-btn'>添加简答题</button>
            </div>
          </div>
        </form>
        <hr/>
    </div>
    <div class="layui-col-md6">
        <h1>试卷预览</h1>
        <hr/>
        <h2>单选题</h2>
        {% for i in single_choice_question %}
            <pre>问题: {{ i.question }}</pre>
            <p>A. {{ i.a }}</p>
            <p>B. {{ i.b }}</p>
            <p>C. {{ i.c }}</p>
            <p>D. {{ i.d }}</p>
            <p>答案: {{ i.answer }}</p>
            <hr/>
        {% endfor %}
        <hr/>
        <h2>多选题</h2>
        {% for i in multiple_choice_question %}
            <pre>问题: {{ i.question }}</pre>
            <p>A. {{ i.a }}</p>
            <p>B. {{ i.b }}</p>
            <p>C. {{ i.c }}</p>
            <p>D. {{ i.d }}</p>
            <p>答案: {{ i.answer }}</p>
            <hr/>
        {% endfor %}
        <hr/>
        <h2>判断题</h2>
        {% for i in judgmental_question %}
            <pre>问题: {{ i.question }}</pre>
            <p>答案: {% if i.answer == 1 %}对{% else %}错{% endif %}</p>
            <hr/>
        {% endfor %}
        <hr/>
        <h2>简答题</h2>
        {% for i in short_answer_question %}
            <pre>问题: {{ i.question }}</pre>
            <pre>答案: {{ i.answer }}</pre>
            <hr/>
        {% endfor %}
        <hr/>
        <h2>图片题</h2>
        {% for i in picture_question %}
            <img src="{{ i.question }}">
            <p>答案: {{ i.answer }}</p>
            <hr/>
        {% endfor %}
        <hr/>
    </div>
</div>
{% endblock %}


{% block script %}
<script>
    function add_single_choice_question() {
        $.post(
            "/test_paper/add_single_choice_question",
            {
                "paper_id": {{ test_paper_id }},
                "question": document.getElementById("single_choice_question").value,
                "a": document.getElementById("single_choice_a").value,
                "b": document.getElementById("single_choice_b").value,
                "c": document.getElementById("single_choice_c").value,
                "d": document.getElementById("single_choice_d").value,
                "answer": document.getElementById("single_choice_correct").value
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
    function add_judgmental_question() {
        $.post(
            "/test_paper/add_judgmental_question",
            {
                "paper_id": {{ test_paper_id }},
                "question": document.getElementById("judgmental_question").value,
                "answer": document.getElementById("judgmental_answer").value
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
    function add_short_answer_question() {
        $.post(
            "/test_paper/add_short_answer_question",
            {
                "question": document.getElementById("short_answer_question").value,
                "answer": document.getElementById("short_answer_answer").value,
                "paper_id": {{ test_paper_id }}
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
</script>
{% endblock %}
